 <template>
 	<div class="demo5">
 		<ynet-steps :steps="steps0" direction="vertical" :current="0.8">
 			<div class="custom-content" slot="content" slot-scope="{index, step}">
 				<template v-if="index === 0">
 					<p class="name active" v-text="step.name"></p>
 					<p class="amount">
 						<md-amount :value="+step.amount"></md-amount>元
 					</p>
 					<p class="desc" v-html="step.text"></p>
 				</template>
 				<template v-else>
 					<p class="name" v-text="step.name"></p>
 				</template>
 			</div>
 		</ynet-steps>
 	</div>
 </template>
 <script>
 	import { Steps } from 'ynet-mobile'
 	import { Amount } from 'mand-mobile'
 	export default {
 		title: '竖向自定义内容',
 		name: 'steps-demo',
 		components: {
 			[Steps.name]: Steps,
 			[Amount.name]: Amount
 		},
 		data(){
 			return {
 				steps0: [
 					{
 						name: '还款申请已提交',
 						amount: '600.5',
 						text: '银行处理中，预计<span>30分钟</span>内到账，请留意短信信息。如有疑问，请联系客服。'
 					},
 					{
 						name: '还款成功'
 					}
 				],
 				steps1: [
 					{
 						name: '还款申请已提交',
 					},
 					{
 						name: '还款成功',
 						amount: '600.5',
 					}
 				]
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.demo5{
 		.custom-content{
 			.name{
 				font-size: 48px;
 				color: #858B9C;
 				&.active{
 					font-size: 48px;
 					color: #111A34;
 				}
 			}
 			.amount{
 				margin-top: 20px;
 				color: #111A34;
 				.md-amount{
					margin-right: 5px;
					font-size: 80px;
 				}
 			}
 			.desc{
 				line-height: 40px !important;
 				span{
 					color: #FF8325
 				}
 			}
 		}
 	}
 </style>